<template>
<center>
  <div class="container">
  
    <div class="row">
    
      <div class="col-sm-10">
        <h1>Clubs</h1>
        <!-- <input placeholder="search" > -->
        <br><br><br>
        <alert :message=message v-if="showMessage"></alert>
        <table>
          <thead>
            <tr>
              <button type="button" class="btn btn-success btn-sm" v-b-modal.club-modal>添加俱乐部</button>
              <th>            </th>
              <button type="button" class="btn btn-primary btn-sm" @click="toType">车型列表</button>
            </tr>
          </thead>
        </table>
        <br><br>
        
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">Loc</th>
              <th scope="col">Name</th>
              <th scope="col">Modify</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(club, index) in clubs" :key="index">
              <td>{{ club.loc }}</td>
              <td>{{ club.name }}</td>
              
              <td>
                <div class="btn-group" role="group">
                  <button
                          type="button"
                          class="btn btn-warning btn-sm"
                          v-b-modal.club-update-modal
                          @click="editClub(club)">
                      Update
                  </button>
                  <button
                          type="button"
                          class="btn btn-danger btn-sm"
                          @click="onDeleteClub(club)">
                      Delete
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th scope="col"><button type="button" class="btn btn-primary btn-sm" v-on:click="prePage">上一页</button></th>
              <th>{{nowPage}}/{{totalPages}}</th>
              <th scope="col"><button type="button" class="btn btn-primary btn-sm" v-on:click="nextPage">下一页</button></th>
              
            </tr>
          </thead>
        </table>
      </div>
      
    </div>
   
    

    
    
    
    <br><br>
    <b-modal ref="addClubModal"
            id="club-modal"
            loc="Add a new club"
            hide-footer>
      <b-form @submit="onSubmit" @reset="onReset" class="w-100">
      <b-form-group id="form-loc-group"
                    label="Loc:"
                    label-for="form-loc-input">
          <b-form-input id="form-loc-input"
                        type="text"
                        v-model="addClubForm.loc"
                        required
                        placeholder="Enter loc">
          </b-form-input>
        </b-form-group>
        <b-form-group id="form-name-group"
                      label="Name:"
                      label-for="form-name-input">
            <b-form-input id="form-name-input"
                          type="text"
                          v-model="addClubForm.name"
                          required
                          placeholder="Enter name">
            </b-form-input>
          </b-form-group>
        
        <b-button-group>
          <b-button type="submit" variant="primary">提交</b-button>
          <b-button type="reset" variant="danger">取消</b-button>
        </b-button-group>
      </b-form>
    </b-modal>
    <b-modal ref="editClubModal"
            id="club-update-modal"
            loc="Update"
            hide-footer>
      <b-form @submit="onSubmitUpdate" @reset="onResetUpdate" class="w-100">
      <b-form-group id="form-loc-edit-group"
                    label="Loc:"
                    label-for="form-loc-edit-input">
          <b-form-input id="form-loc-edit-input"
                        type="text"
                        v-model="editForm.loc"
                        required
                        placeholder="Enter loc">
          </b-form-input>
        </b-form-group>
        <b-form-group id="form-name-edit-group"
                      label="Name:"
                      label-for="form-name-edit-input">
            <b-form-input id="form-name-edit-input"
                          type="text"
                          v-model="editForm.name"
                          required
                          placeholder="Enter name">
            </b-form-input>
          </b-form-group>
        
        <b-button-group>
          <b-button type="submit" variant="primary">Update</b-button>
          <b-button type="reset" variant="danger">Cancel</b-button>
        </b-button-group>
      </b-form>
    </b-modal>
  </div>
  </center> 
</template>

<script>
import axios from 'axios';
import Type from './Type.vue';

export default {
  
  data() {
    return {
      preHidden:true,
      nextHidden:false,
      totalPages: 0,
      nowPage: 1,
      clubs: [],
      addClubForm: {
        loc: '',
        name: ''
      },
      message: '',
      showMessage: false,
      editForm: {
        loc: '',
        name: ''
      },
    };
  },
  components: {
    type: Type,
  },
  methods: {
    toType(){
      this.$router.push('/Type')
    },
    getClubs(nowPage) {
      // const path = '/api/clubs';
      const path = '/api/page/p/'+nowPage;
      axios.get(path)
        .then((res) => {
          console.log(res.data[0])
          this.clubs = res.data[0];
          this.totalPages = res.data[1];
          // alert(res.data[1])
        })
        .catch((error) => {
          console.error(error);
        });
    },
    prePage(){
      let that = this
      if (that.nowPage>1){
        that.nowPage -= 1
        this.getClubs(that.nowPage)
      }else{
        alert("已经是第一页了")
      }
      
    },
    nextPage(){
      let that = this
      
      if (that.nowPage<that.totalPages){
        that.nowPage += 1
        this.getClubs(that.nowPage)
      }else{
        alert("已经是最后一页了")
      }
    },
    
    //定义表单，赋予初始值
    initForm() {
      this.addClubForm.loc = '';
      this.addClubForm.name = '';
      this.addClubForm.read = [];
      this.editForm.id = '';
      this.editForm.loc = '';
      this.editForm.name = '';
      this.editForm.read = [];
    },
    //入口（绑定在button上的方法，其中调用了下面的addClub）
    onSubmit(evt) {
      evt.preventDefault();
      this.$refs.addClubModal.hide();
      //传递参数
      const payload = {
        loc: this.addClubForm.loc,
        name: this.addClubForm.name
                
      };
      this.addClub(payload);
      this.initForm();
    },
    //添加Club方法
    addClub(payload) {
      const path = '/api/add';
      const that = this;
      axios.post(path, that.$qs.stringify(payload))
        .then((e) => {
          console.log(e)
          this.getClubs(that.totalPages);
          this.message = '已添加俱乐部';
          this.showMessage = true;
        })
        .catch((error) => {
          console.log(error);
          this.getClubs(that.totalPages);
        });
    },


    //入口（绑定在button上的方法，其中调用了下面的upDateClub）
    onSubmitUpdate(evt) {
      evt.preventDefault();
      this.$refs.editClubModal.hide();
      const payload = {
        cid: this.editForm.cid,
        loc: this.editForm.loc,
        name: this.editForm.name,
      };
      this.updateClub(payload);
    },
    //update方法
    updateClub(payload) {
      const path = '/api/update';
      const that = this;
      axios.post(path, that.$qs.stringify(payload))
        .then(() => {
          this.getClubs(that.nowPage);
          this.message = '数据已更新!';
          this.showMessage = true;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
          this.getClubs(that.nowPage);
        });
    },
    //删除相关
    onDeleteClub(club) {
      this.removeClub(club.cid);
    },
    removeClub(clubID) {
      var data={
        'cid' : clubID
      }
      const path = '/api/dele';
      const that = this;
      axios.post(path, that.$qs.stringify(data))
        .then((e) => {
          console.log(e)
          this.getClubs(that.nowPage);
          this.message = '已删除!';
          this.showMessage = true;
        })
        .catch((error) => {
          console.error('error:'+error);
          this.getClubs(that.nowPage);
        });
    },
    onReset(evt) {
      evt.preventDefault();
      this.$refs.addClubModal.hide();
      this.initForm();
    },
    editClub(club) {
      this.editForm = club;
    },
    onResetUpdate(evt) {
      evt.preventDefault();
      this.$refs.editClubModal.hide();
      this.initForm();
      this.getClubs(that.nowPage); // why?
    },
    
  },
  created() {
    let that = this
    this.getClubs(that.nowPage);
  },
};
</script>


